<template>
  <div class="page">
    <div class="top">
      <c-title :hide="false" text="易货订单列表"></c-title>
    </div>
    <van-tabs v-model="active" @change="changevalue">
      <van-tab title="全部"> </van-tab>
      <van-tab title="待付款"> </van-tab>
      <van-tab title="待发货"> </van-tab>
      <van-tab title="待收货"> </van-tab>
      <van-tab title="已完成"> </van-tab>
    </van-tabs>
    <div class="content">
      <div v-for="(item, index) in orderList" :key="index" class="order" @click="getoneorder(item.id)">
        <div class="imgclass"><img :src="item.goods_info.business_pic" alt="" /></div>
        <div class="textclass">
          <div class="ordertop">
            <div class="name">
              <div class="label">商品名称：</div>
              <div class="text">{{ item.goods_info.name }}</div>
            </div>
            <!-- <p></p> -->
            <div class="price">价格：{{ item.price }}</div>
            <!-- <p></p> -->
          </div>
          <div class="date">
            <div class="label">时间：</div>
            <div class="text">{{ item.add_time }}</div>
          </div>
          <div class="staus">
            <div class="label">订单状态：</div>
            <div class="text">{{ item.order_status == 0 ? "未支付" : item.order_status == 1 ? "待发货" : item.order_status == 2 ? "待确认" : "已完成" }}</div>
          </div>
          <!-- S -->

          <div class="snorder">
            <div class="label">订单编号：</div>
            <div class="text">{{ item.order_sn }}</div>
          </div>
          <div class="bot">
            <van-button type="primary" v-if="item.order_status === 2" block @click.stop="qrsh(item.id)">确认收货</van-button>
            <van-button type="primary" v-if="item.order_status === 0" block @click.stop="qrzf(item.id)">待支付</van-button>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      orderList: [],
      active: 0,
      order_status: ""
    };
  },
  activated() {
    this.getorderList();
  },
  methods: {
    changevalue(e) {
      console.log(e)
      if (e == 0) {
        this.order_status = "";
      }else{
      this.order_status = e;
      }
      this.getorderList();
    },
    getorderList() {
      $http
        .post("plugin.store-yihuo.frontend.store.yihuo.orderlist", {
          order_status: this.order_status
        })
        .then(response => {
          if (response.result === 1) {
            this.orderList = response.data;
            console.log(this.orderList)
            if (this.orderList.length === 0) {
              Toast("暂无任何订单信息");
            }
          } else {
          }
        });
    },
    getoneorder(order_id) {
      this.$router.push(this.fun.getUrl("oneorderx", {}, { order_id }));
    },
    qrsh(id){
         $http.post("plugin.store-yihuo.frontend.store.yihuo.qrsh", {
          order_id: id
        })
        .then(response => {
          if (response.result === 1) {
           this.getorderList()
          } else {
          }
        });
    },
    qrzf(id){
       $http.post("plugin.store-yihuo.frontend.store.yihuo.payorder", {
          order_id: id
        })
        .then(response => {
          console.log(response)
          if (response.result === 1) {
           this.getorderList()
          } else {
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  .imgclass {
    margin-right: 1rem;
    img {
      width: 6rem;
      height: 6rem;
    }
  }
  .textclass {
    text-align: left;
    .label {
      font-weight: 600;
    }
  }
  .snorder {
    display: flex;
    .bot {
      display: flex;
      justify-content: space-between;
    }
  }
  .staus {
    display: flex;
    .label {
      display: flex;
    }
  }
  .order {
    margin: 0.8rem;
    background-color: #fff;
    padding: 0.5rem;
    display: flex;
    .bot {
      display: flex;
      justify-content: right;
      .van-button{
        width: 8rem;
        height: 2rem;
        
      }
    }
  }
  .date {
    display: flex;
    .label {
      font-weight: 600;
    }
  }
  .ordertop {
    display: flex;
    justify-content: space-between;

    .name {
      margin-right: 0.5rem;
      display: flex;
      .label {
        font-weight: 600;
      }
    }
  }
}
</style>